<template>
  <div class="chart" ref="businessType"></div>
</template>

<script>
import * as echarts from 'echarts'
import {getServiceType} from '@/api/api'
export default {
  props:{
    total:{
      type:Number,
      default:0
    }
  },
  watch: {
      'total': function (val) {
        this.initChart();
      }
    },
  data() {
    return {
      charData:[]
    }
  },
  mounted() {
    getServiceType().then((res)=>{
        if(res.success){
            this.charData = res.result
            this.initChart()
        }
    })
  },
  methods: {
    initChart() {
      let data = this.charData
      let total = this.total
      let myChart = echarts.init(this.$refs.businessType)
      let colorArr = [
        '#4F76F7',
        '#1E70FF',
        '#4DBAFF',
        '#FCA744',
        '#FFDC1E',
        '#FF633E',
        '#51E251',
        '#59E0D6',
        '#EA5AC9',
        '#B171FC',
      ]
      let option = {
        title: {
          show: false, 
        },
        legend: {
        //   type: 'scroll',
          orient: 'vertical',
          right: '4%',
          top: '5%',
          itemHeight: 8,
          textStyle: {
            color: '#999',
            fontSize: 12,
          },
        //   data: legend,
        },
        series: [
          {
            name: '商家总数',
            type: 'pie',
            center: ['30%', '25%'],
            itemStyle: {
              color: 'transparent',
            },
            label: {
              position: 'inside',
              formatter: `{data|{c}}\n{serie|{a}}`,
              rich: {
                data: {
                  fontWeight: '400',
                  fontSize: 24,
                  color: `#333`,
                  lineHeight: 36,
                  textBorderColor: `transparent`,
                  textBorderWidth: 0,
                },
                serie: {
                  fontSize: 12,
                  color: `#999`,
                  textBorderColor: `transparent`,
                  textBorderWidth: 0,
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: [total],
          },
          {
            type: 'pie',
            radius: ['55%', '80%'],
            center: ['30%', '50%'],
            data: data,
            label: {
              show: false,
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            color: colorArr,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.chart {
  height: 180px;
}
</style>